<template>
    <div id="usersManage">
      <div class="research" style="margin-left: calc(50% - 265px)">
        <el-input
          placeholder="默认展示部分用户，可以通过用户名搜索用户..."
          v-model="input"
          clearable
          prefix-icon="el-icon-search">
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleResearch">搜索</el-button>
      </div>

      <div style="display: flex;justify-content: space-around;flex-wrap: wrap">
        <el-card style="width:300px;margin-top: 10px;" v-for="(user,index) in users" :key="index"
                 v-loading="loading">
          <!--cardloading[index]-->
          <div slot="header" style="text-align: left;">
            <span>{{user.nickname}}</span>
            <el-button style="float: right; padding: 3px 0;color: #ff0509" type="text" icon="el-icon-delete"
                       @click="deleteUser(user.id)">删除
            </el-button>
          </div>
          <div>
            <!--user.userface-->
            <div><img :src="user.image" :alt="user.nickname" style="width: 100px;height: 100px;margin-left: calc(50% - 50px)"></div>
            <div style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">
              <span>用户名:</span><span>{{user.username}}</span>
            </div>
            <div style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">
              <span>电子邮箱:</span><span>{{user.email}}</span>
            </div>
            <div style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">
              <span>注册时间:</span><span>{{$moment(user.register_date).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </div>
            <div
              style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px;display: flex;align-items: center">
              <span>用户状态:</span>
              <el-switch
                v-model="user.state"
                active-value="启用"
                inactive-value="禁用"
                active-text="启用"
                active-color="#13ce66"
                @change="enabledChange(user.state,user.id,index)"
                inactive-text="禁用" style="font-size: 12px">
              </el-switch>
            </div>
            <div style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">
              <span>用户角色:</span>
              <el-tag
                v-for="tag in user.tags"
                :key="tag.id"
                size="mini"
                style="margin-right: 8px"
                type="success">
                {{tag.name}}
              </el-tag>
              <el-popover
                placement="right"
                title="角色列表"
                width="200"
                :key="index+''+user.id"
                @hide="saveTag(user.id,index)"
                trigger="click" v-loading="eploading[index]">
                <el-select v-model="tags" :key="user.id" multiple placeholder="请选择" size="mini">
                  <el-option
                    v-for="(item,index) in allTags"
                    :key="user.id+'-'+item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
                <el-button type="text" icon="el-icon-more" style="padding-top: 0px" slot="reference"
                           @click="showTag(user.tags,user.id,index)"></el-button>
              </el-popover>
            </div>
          </div>
        </el-card>
      </div>

    </div>
</template>

<script>
    export default {
        name: "UsersManage",
      data(){
        return {
          input: '',//搜索框
          loading: true,
          eploading: [],
          cardloading: [],
          keywords: '',
          users: [],//用户信息
          allTags: [],//加载全部标签信息
          tags: [],//记录已选标签信息
          cpRoles: [],
          temp:[],
        }
      },
      created(){
        const _this = this
        this.loadUser();
        this.axios({
          method:'post',
          url:"http://localhost:8081/getAllTag",
        }).then(function (resp) {
          _this.allTags=resp.data;
        })
      },
      methods:{
        loadUser(){
          const _this = this
          this.axios({
            method:'post',
            url:"http://localhost:8081/getAllUser",
          }).then(function (resp) {
            _this.users=resp.data;
            _this.loading=false;
          });
        },
        reloadUser(id){
          const _this = this;
          this.axios({
            method:'post',
            url:"http://localhost:8081/getUserById",
            params:{'id':id}
          }).then(function (resp) {
            for(var i=0;i<_this.users.length;i++){
              if(_this.users[i].id==resp.data[0].id){
                _this.users[i].tags=resp.data[0].tags;
                break;
              }
            }
          });
        },
        handleResearch(){
          if(this.input!=''){
            const _this = this
            this.axios({
              method:'post',
              url:"http://localhost:8081/getUserByUsername",
              params:{'username': _this.input}
            }).then(function (resp) {
              _this.users=resp.data;
            })
          }else{
            this.$message({
              type: 'warning',
              message: '请输入用户名!'
            });
          }
        },
        deleteUser(id){
          const _this = this;
          this.$confirm('确定将该用户永久删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.axios({
              method:'post',
              url:"http://localhost:8081/deleteUserById",
              params:{'id':id}
            }).then(function (resp) {
              if(resp.data.status==200){
                _this.$message({
                  type: 'success',
                  message: resp.data.info
                });
                _this.loadUser();
              }else{
                _this.$message({
                  type: 'error',
                  message: resp.data.info
                });
              }
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        },
        enabledChange(state,id,index){
          console.log(state,id,index)
          const _this = this
          this.axios({
            method:'post',
            url:"http://localhost:8081/updateUserById",
            params:{'state': state,'id':id}
          }).then(function (resp) {
            if(resp.data.status==200){
              _this.$message({
                type: 'success',
                message: resp.data.info
              });
            }else{
              _this.$message({
                type: 'error',
                message: resp.data.info
              });
            }
          })
        },
        showTag(tags,id,index){
          this.tags=[];
          for(var i=0;i<tags.length;i++){
            this.tags.push(tags[i].id);
          }
          this.temp = this.tags;
        },
        saveTag(id,index){
          const _this = this;
          if(this.tags==''){
            _this.$message({
              type: 'warning',
              message: '用户角色不能为空！'
            });
          }else{
            if(!this.$utils.judgeResultFun(this.temp,this.tags)){
              this.axios({
                method:'post',
                url:"http://localhost:8081/updateUserTag",
                params:{'uid':id,'tagIds':_this.tags.toString()}
              }).then(function (resp) {
                if(resp.data.status==200){
                  _this.$message({
                    type: 'success',
                    message: resp.data.info
                  });
                  _this.reloadUser(id);
                }else{
                  _this.$message({
                    type: 'error',
                    message: resp.data.info
                  });
                }
              });
            }
          }
        },

      }
    }
</script>

<style>
  #usersManage{
    width:calc(100% - 20px) ;
    padding: 20px 10px;

  }

  /*搜索框样式*/
  .research{
    display: flow;
    width: 500px;
  }

  .research .el-input__inner{
    height: 30px;
    line-height: 30px;
  }

  .research .el-input__icon{
    line-height: 30px;
  }

  .research .el-input{
    width: 80%;
  }

  .research .el-button{
    height: 30px;
    padding: 0px 15px;
  }


</style>
